<template>
	<view class="userCoupon">
		<navbar :showBack="true">我的优惠券</navbar>
		<view class="list" v-if="JSON.stringify(couponData) != '[]'">
			<view class="item acea-row row-center-wrapper" v-for="(item,index) in couponData" :key="index">
				<view class="money acea-row row-column row-center-wrapper" :class="item.status!=0?'bg02':'bg01'">
					<view>￥<text class="num">{{item.coupon_price}}</text></view>
					<view class="pic-num">满{{item.use_min_price}}元可用</view>
				</view>
				<view class="text">
					<view class="condition line1" :class="item.status!=0?'is_use':''">
						<text class="line-title" v-if="item.applicable_type==0">通用劵</text>
						<text class="line-title" v-if="item.applicable_type==1">品类券</text>
						<text class="line-title" v-if="item.applicable_type==2">商品券</text>
						<text>{{item.coupon_title}}</text>
					</view>
					<view class="data acea-row row-between-wrapper">
						<view>{{item.add_time+'领取'}}</view>
						<view class="bnt" :class="item.status!=0?'using':'bg-color'">{{item.status | getType}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="noCoupon" v-else><image src="../../../static/images/noCoupon.png" mode=""></image></view>
	</view>
</template>

<script>
	import api from "@/api/api.js";
	export default{
		data(){
			return{
				couponData:[]
			}
		},
		onLoad() {
			this.getData()
		},
		filters:{
			getType(e){
				switch(e){
					case 0:
						return "可使用"
					break;
					case 1:
						return "已使用"
					break;
					case 2:
						return "已过期"
					break;
				}
			}
		},
		methods:{
			getData:function(){
				const that = this;
				api.coupon.getCoupon(0).then(e=>{
					console.log(e)
					if(e.status == 200){
						that.couponData = e.data
					}else{
						uni.showToast({
							title:e.msg,
							icon:"none"
						})
					}
				})
			},
		}
	}
</script>

<style>
	.userCoupon .list{
		min-height: 100vh;
		background: #F2F2F2;
		padding: 20rpx 0;
	}
	.userCoupon .noCoupon{
		width: 414rpx;
		height: 336rpx;
		margin: 0 auto 50rpx auto;
	}
	.userCoupon .list .item{
		width: 100%;
		height: 170rpx;
		margin-bottom: 16rpx;
	}
	.userCoupon .list .item{
		width: 100%;
		height: 170rpx;
		margin-bottom: 16rpx;
	}
	.userCoupon .list .item .money{
		width: 240rpx;
		height: 100%;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.userCoupon .list .item .money.bg01{
		background-image: url();
	}
	.userCoupon .list .item .money.bg02{
		background-image: url();
	}
	.userCoupon .list .item .money view .num{
		font-size: 60rpx;
	}
	.userCoupon .list .item .money .pic-num{
		color: #fff;
		font-size: 24rpx;
	}
	.userCoupon .list .item .text{
		width: 450rpx;
		padding: 0 17rpx 0 24rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
	.userCoupon .list .item .text .condition{
		font-size: 30rpx;
		color: #282828;
		height: 93rpx;
		line-height: 93rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	.userCoupon .list .item .text .condition .shengyu{
		font-size: 20rpx;
		color: #999;
	}
	.userCoupon .list .item .text .condition .line-title{
		width: 90rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		background: #fff7f7;
		border: 1px solid #e83323;
		opacity: 1;
		border-radius: 20rpx;
		font-size: 20rpx;
		color: #E83323;
		margin-right: 12rpx;
	}
	.userCoupon .list .item .text .condition.using .line-title{
		border-color: #BBB;
		color: #bbb;
		background-color: #F5F5F5;
	}
	.userCoupon .list .item .text .data{
		font-size: 20rpx;
		color: #999;
		height: 76rpx;
	}
	.userCoupon .list .item .text .data .bnt{
		width: 136rpx;
		height: 44rpx;
		border-radius: 22rpx;
		font-size: 22rpx;
		text-align: center;
		line-height: 44rpx;
		color: #fff;
	}
	.userCoupon .list .item .text .data .bnt.using{
		background-color: #ccc;
	}
</style>
